<template>
  <div>
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <el-breadcrumb-item class="no-redirect"> <span class="no-redirect">采购管理</span> </el-breadcrumb-item>
      <el-breadcrumb-item class="no-redirect"> <span class="no-redirect">采购车</span></el-breadcrumb-item>
      <el-breadcrumb-item class="no-redirect"> <a>{{ activeName }}</a> </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="dis-flex flex-y-center">
      <div class="seach-box dis-flex flex-y-center" :class="id?'':'ov-auto'">
        <label class="seach-name">搜索商品:</label>
        <el-input v-model="seach.username" placeholder="商品/原料名称" size="small" />
        <el-input v-model="seach.real_name" placeholder="商品编码" size="small" />
        <el-button type="primary" icon="el-icon-search" size="small" @click="searchBox('search')">搜索</el-button>
        <el-button icon="el-icon-refresh-left" size="small" @click="searchBox('reset')">重置</el-button>
      </div>
      <div v-if="id" class="details seach-box dis-flex flex-y-center">
        <label class="seach-name">采购单号:</label>
        <el-input v-model="purchaseUnify.id" placeholder="采购单号" size="small" disabled />
        <label class="seach-name">制单员:</label>
        <el-select v-model="purchaseUnify.create_user_id" placeholder="制单人" filterable size="small">
          <el-option value="" label="请选择制单人" />
          <el-option v-for="(item, index) in adminList" :key="index" :value="item.id" :label="item.real_name" />
        </el-select>
        <label class="seach-name">制单时间:</label>
        <el-input v-model="purchaseUnify.create_time" placeholder="制单时间" size="small" disabled />
        <label class="seach-name">确认人:</label>
        <el-select v-model="purchaseUnify.verify_user_id" placeholder="确认人" filterable size="small">
          <el-option value="" label="请选择确认人" />
          <el-option v-for="(item, index) in adminList" :key="index" :value="item.id" :label="item.real_name" />
        </el-select>
      </div>
    </div>
    <div class="app-content">
      <div class="operation">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="成品采购车" name="成品采购车">
            <GoodsCart ref="goodsCart" @success="success" />
          </el-tab-pane>
          <el-tab-pane label="原料分配表" name="原料分配表">
            <MaterialCart ref="materialCart" @success="success" />
          </el-tab-pane>
          <el-tab-pane v-if="id" label="采购详情" name="采购详情">
            <PurchaseDetail ref="purchaseDetail" :admin-list="adminList" />
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
  </div>
</template>
<script>
import GoodsCart from './components/goodsCard'
import MaterialCart from './components/materialCart'
import PurchaseDetail from './components/purchaseDetail'
import { Admin } from '@/api/system/admin'
import { PurchaseUnify } from '@/api/purchase/purchaseUnify'

export default {
  name: 'PurchaseVehicle',
  components: {
    GoodsCart,
    MaterialCart,
    PurchaseDetail
  },
  data() {
    return {
      activeName: '成品采购车',
      seach: {},
      id: '',
      purchaseUnify: {},
      adminList: []
    }
  },
  created() {
    this.getAdmin()
  },
  methods: {
    searchBox() {},
    handleClick(tab, event) {
      console.log(tab.index === '1')
      // if (tab.index === '0') {
      //   this.$refs.goodsCart.getCart()
      // } else
      if (tab.index === '1') {
        this.$refs.materialCart.show()
      }
    },
    success(id) {
      this.id = id
      console.log(id, 'this.id = id;')
      this.activeName = '采购详情'
      this.getPurchaseUnify()
    },
    getAdmin() {
      Admin.listAdmin().then((res) => {
        this.adminList = res.data
      }).catch(() => {})
    },
    // 获取总采购单信息
    getPurchaseUnify() {
      PurchaseUnify.pagePurchaseUnify({ id: this.id }).then((res) => {
        this.purchaseUnify = res.data.data ? res.data.data[0] : {}
        this.$refs.purchaseDetail.show(this.id)
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
.ov-auto{
 overflow-x: auto !important;
}
.seach-box {
  overflow-x: scroll;
  flex: 1;
  .seach-name{
    flex: 0 0 60px;
  }
}
.details{
   overflow-x: scroll;
  .el-select{
    flex: 0 0 200px;
    margin-right: 20px;
  }
}
.operation{
  padding: 0 10px;
  position: relative;
    ::v-deep .el-tabs__content{
    position: unset;
    }
    ::v-deep .el-tabs__item{
      height: 46px;
      line-height: 46px;
    }
}

</style>

